<template>
  <v-sheet elevation="2" class="pa-2">
    <div class="d-flex flex-wrap">
      <div class="col-12 font-weight-bold text-h6">就医攻略</div>
      <v-divider class="mx-5"></v-divider>
      <div class="d-flex flex-wrap">
        <div class="col-6 col-md-4">
          <v-card color="primary" class="h-100" height="150" :img="picUrl"></v-card>
        </div>
        <div class="col-6 col-md-8">
          <div
            class="primary--text text-body-1 text-md-h6 cur-point hover-underline"
          >
            <span>{{ topTitle }}</span>
          </div>
          <div class="text-caption text-md-body-2">
            <span class="text-wrap"> {{ articles.topText }} </span
            ><span class="primary--text cur-point">【详情】</span>
          </div>
        </div>
      </div>
      <div
        class="d-flex flex-wrap align-center"
        v-for="(item, index) in articles.articleTitleList"
        :key="index"
      >
        <span
          class="col-8 py-2 text-caption text-md-body-2 cur-point hover-underline"
          >{{ item.title }}</span
        >
        <span
          class="col-4 py-2 d-flex justify-end text-caption text-md-body-2"
          >{{ item.time }}</span
        >
      </div>
    </div>
  </v-sheet>
</template>



<script>
export default {
  props: ["picUrl"],
  data() {
    return {
      articles: {
        picUrl: "",
        topTitle: "春节恐归，谁来拥抱那些抑郁的人",
        topText:
          " 年终岁末，原本应该是喜气洋洋的时光，有的人却感觉越来越沉重，越来越难受，慢慢陷入了抑郁的泥潭是的，抑 ",
        articleTitleList: [
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
          {
            title: "皮肤暗、舌苔厚、没有月牙……这些身体密码能识别“亚健康”？",
            time: "2018-02-05",
          },
        ],
      },
    };
  },
  computed: {
    topTitle() {
      const text = this.articles.topTitle;

      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          return this.getSliceWords(13, text);
        case "sm":
          return this.getSliceWords(15, text);
        case "md":
          return this.getSliceWords(18, text);
        case "lg":
          return this.getSliceWords(12, text);
        case "xl":
          return this.getSliceWords(13, text);
      }
    },
  },
  methods: {
    getSliceWords(num, text) {
      return (
        text.split("").slice(0, num).join("") +
        `${text.length > num ? "..." : ""}`
      );
    },
  },
};
</script>



<style lang="scss" scoped>
</style>
